@import '@fontsource/rubik/index.css';
@import '@fontsource/cabin/index.css';
/*
  Subset of font https://github.com/googlefonts/noto-emoji
  which includes only flags emoji generated using command:
  $ fonttools subset NotoColorEmoji.ttf --ignore-missing-glyphs --text-file=data.txt
  where data.txt is a text file containing all the glyphs you want to include
*/
@font-face {
  font-family: 'Noto Color Emoji';
  src: url('./assets/NotoColorEmoji.subset.ttf');
}

* {
  box-sizing: border-box;
  /* Measurements */
}

body {
  height: 100vh;
}

.App {
  text-align: center;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-areas: 'offline offline' 'sidebar content' 'sidebar controller';
  grid-template-rows: min-content 1fr min-content;
  min-height: 100vh;
}

.App .Sidebar {
  grid-area: sidebar;
  max-height: 100vh;
  position: sticky;
  top: 0px;
}

.App .content {
  container: main-content / inline-size;
  display: flex;
  grid-area: content;
  flex-direction: column;
  min-height: 100%;
  &:not(:has(.gameConfigContainer img.backgroundImage)) {
    background: var(--gradient-body-background, var(--body-background));
  }
}

.App .controller {
  grid-area: controller;
  position: sticky;
  bottom: 0px;
  background: var(--background);
  /* MUI Dialogs use a z-index of 1300, make sure this is never less than it */
  z-index: 1400;
}

.App .offline-message {
  grid-area: offline;
}

body:has(.disableAnimations) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    transition-duration: 0ms !important;
  }
  .MuiTouchRipple-root {
    display: none !important;
  }
  .Mui-focusVisible {
    background: color(from var(--accent-overlay) srgb r g b / 0.3);
  }
}

.HelpButton {
  position: fixed;
  bottom: 0;
  right: 0;
}

/* Disable content behind an opened dialog so it cannot be clicked */
body:has(dialog[open]) {
  pointer-events: none;

  /* Make sure content of the dialog and Help can be clicked */
  .HelpButton,
  dialog[open] {
    pointer-events: all;
  }
}

/* Remove outline on the root element since it's not clickable anyway and it's partially hidden away by sidebar */

#root:focus-visible {
  outline: none;
}

/* disable links when the help is open, so users cannot navigate
to another page but still use the elements of the current page */
#root:has(.HelpContent.open) {
  & a {
    pointer-events: none;
  }
  /* Make sure links in Help work */
  .HelpContent a {
    pointer-events: all;
  }
}

.danger {
  font-weight: var(--bold);
  color: var(--text-danger, var(--danger));
}

.warning {
  font-weight: var(--bold);
  color: var(--text-warning, var(--warning));
}

.material-icons.is-primary {
  /* I can't find any elements that use this, so idk what colour this should be */
  color: var(--danger);
}

.material-icons.is-secondary {
  color: var(--download-button);
}

.material-icons.is-success {
  color: var(--success);
}

.material-icons.is-danger {
  color: var(--danger);
}

.material-icons.is-danger:hover {
  color: var(--danger-hover);
}

.material-icons.settings.folder {
  cursor: pointer;
  color: var(--text-default);
}

.icons > * {
  cursor: pointer;
}

.smallMessage {
  font-size: var(--text-md);
  width: 100%;
  max-width: 513px;
  white-space: break-spaces;
  padding-top: 4px;
}

svg.disabled {
  color: var(--background);
}

img.loading {
  opacity: 0;
}

img.loaded {
  transition: opacity 500ms;
  opacity: 1;
}

.react-contextmenu--visible {
  background-color: var(--input-background);
  padding: var(--space-md) var(--space-lg);
  border-radius: 6px;
  z-index: 99;
}

.react-contextmenu-item {
  color: var(--text-default);
  font-size: var(--text-sm);
  line-height: var(--space-lg);
  font-family: var(--secondary-font-family);
  cursor: pointer;
  text-align: start;
}

.react-contextmenu-item:hover {
  color: var(--download-button);
}

.react-contextmenu-item.disabled {
  color: var(--icon-disabled);
  cursor: initial;
}

.isRTL {
  direction: rtl;
}
